<template>
  <!-- 登录界面 -->
  <div>
    <van-nav-bar
      title="请登录"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="box">
      <van-field
        required
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        :state="phoneState"
        @blur.native.capture="checkPhone"
      />
      <van-field
        required
        type="password"
        v-model="upwd"
        label="密码"
        placeholder="请输入密码"
        :state="upwdState"
        @blur.native.capture="checkPwd"
      />
      <van-field
        v-model="imgcode"
        style="padding: 0 16px"
        required
        center
        label="验证码"
        placeholder="请输入验证码"
      >
        <template #right-icon>
          <van-image @click="updateCode" :src="imgSrc" width="80" height="40" />
        </template>
      </van-field>
    </div>
    <!-- 登录按钮 -->
    <van-button @click="login" type="warning" block>登录</van-button>
  </div>
</template>

<script>
//函数调用Notify 消息提示
import { Notify } from "vant";
export default {
  data() {
    return {
      phone: "",
      phoneState: "",
      upwd: "",
      upwdState: "",
      imgSrc: "",
      imgcode: "",
    };
  },
  created() {
    this.$nextTick(() => this.updateCode());
  },
  methods: {
    checkPhone() {
      //验证手机号
      let exp = /^1[3-9]\d{9}$/;
      if (exp.test(this.phone)) {
        //验证成功
        this.phoneState = "success";
        return true;
      } else {
        //验证失败
        //弹出输入错误
        this.$toast("手机号错误");
        this.phoneState = "error";
        return false;
      }
    },
    checkPwd() {
      //验证密码
      // 以字母开头，长度在6~10之间，只能包含字母、数字和下划线
      let exp = /^[a-zA-Z]\w{5,9}$/;
      if (exp.test(this.upwd)) {
        //验证成功
        this.upwdState = "success";
        return true;
      } else {
        //验证失败
        this.$toast("密码错误");
        this.upwdState = "error";
        return false;
      }
    },
    // 更新图片验证码
    updateCode() {
      this.imgSrc = "http://localhost:5000/img_code?d=" + Math.random();
    },
    // 比对验证码
    checkCode(arr, imgcode) {
      let count = 0;
      for (let i = 0; i < arr.length; i++) {
        let newArr = arr[i].split("=");
        if (newArr[1] != imgcode) {
          count++;
        } else {
          return count;
        }
      }
      return count;
    },
    // 点击登录按钮触发的函数
    login() {
      let cookieArr = document.cookie.split(";");
      if (
        this.checkCode(cookieArr, this.imgcode.toLowerCase()) ==
        cookieArr.length
      ) {
        return this.$toast("验证码错误");
      }
      // 进行简单前端验证
      if (this.checkPhone() && this.checkPwd()) {
        //连接数据库,进行验证
        const url = "login";
        const params = `phone=${this.phone}&upwd=${this.upwd}`;
        this.axios.post(url, params).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            let info = res.data.data[0];
            //登录成功提示
            Notify({ type: "success", message: "登录成功", duration: 1000 });
            // 修改用户信息的值
            // this.$store.commit("UpdateUname", "小猫咪");
            this.$store.commit("userInfo", info);
            //成功之后跳转到个人中心
            this.$router.push("/client");
          } else {
            this.$toast("手机号或密码错误");
          }
        });
      } else {
        // 登录失败提示
        this.$toast("手机号或密码有误");
      }
    },
    onClickLeft() {
      return this.$router.push("/index");
    },
    onClickRight() {
      return this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
  color: #000;
}
:deep(.van-nav-bar__text) {
  color: #ea9077;
}
</style>

<style lang="scss">
.box {
  margin: 15px 0;
}
</style>
